<template>
  <div class="container">
    <get-user-info v-if="isGetUserInfo" @authPhoneInfo="authPhoneInfo" @updateUserInfo="initUserGoods" @detailBack="detailBack"></get-user-info>
    <template v-if="!getCustomerId">      
      <get-phone-info v-if="isGetPhoneInfo" @updatePhoneInfo="initPhoneLayer"></get-phone-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-info v-if="isGetPhoneInfo" @updatePhoneInfo="initPhoneLayer"></get-phone-info>
    </template>
    <div v-if="skeletonLoading" class="skeleton-box">
      <div class="skeleton-animate"></div>
      <div class="skeleton-layer layer-1 animate-blink bg-box"></div>
      <div class="skeleton-layer flex flex-between pad-t-6">
        <div class="animate-blink bg-box width-56 height-33"></div>
        <div class="animate-blink bg-box bg-box-1 width-56 height-33 mar-r--10"></div>
      </div>
      <div class="skeleton-layer">
        <div class="animate-blink bg-box height-21"></div>
        <div class="bar-s animate-blink bg-box width-165 height-21 mar-t-8"></div>
      </div>
      <div class="skeleton-layer flex flex-between pad-t-12">
        <div class="animate-blink bg-box width-56 height-21"></div>
        <div class="animate-blink bg-box width-56 height-21"></div>
      </div>
    </div>
    <div ref="top" class="pos-rel">
      <swiper class="top-swiper" autoplay="true" interval="5000" :current="currentIndex" @change="moveSwiper"
        duration="1000" :indicator-dots="false">
        <template v-if="goods.images">
          <block v-for="(item, index) in goods.images" :key="index">
            <swiper-item>
              <img class="top-img" :src="item + '?imageView2/2/w/750'"
                @click="previewImage(item, goods.images)" />
            </swiper-item>
          </block>
        </template>
      </swiper>
      <div
        v-if="goods.images"
        :class="goods.promotionId && isActiving && !isLowerShelf ? 'current-promotion' : ''"
        class="current-index font-10 flex flex-center height-20">
        <div>{{ currentIndex + 1 }} / {{ goods.images.length }}</div>
      </div>
    </div>
    <div>
      <!-- 限时秒杀 -->
      <div v-if="goods.promotionId && isActiving && !isLowerShelf" class="pad-b-10 bg-color-white">
        <div class="out-layer" :style="{background:getAppInfo.style.color7}">
          <div class="left" :style="{background:getAppInfo.style.color6}">
            <div>
              <div class="line-h-1">
                <div class="font-21 font-w" :style="{color:getAppInfo.style.color5}">
                  <div v-if="goods.skuFlag === 1" class="flex v-align-c">                    
                    <span class="font-12">¥</span>{{ goods.minPrice }}
                    <span v-if="goods.maxPrice && goods.maxPrice !== goods.minPrice">
                      <span class="font-15">~ </span>
                      <span class="font-12">¥</span>{{ goods.maxPrice }}
                    </span>
                    <span
                      v-if="goods.totalLimitNum > 0 && goods.limitNum"
                      class="font-11 limit-num mar-l-6"
                      :style="{background:getAppInfo.style.color7, color:getAppInfo.style.color8}">限购{{ goods.limitNum }}件</span>
                  </div>
                  <div v-else class="flex v-align-c">
                    <span class="font-12">¥</span>{{ goods.bestPrice }}
                    <span
                        v-if="activityType === 2 && (goods.totalLimitNum > 0 && goods.limitNum)"
                        class="font-11 limit-num mar-l-6"
                        :style="{background:getAppInfo.style.color7, color:getAppInfo.style.color8}">限购{{ goods.limitNum }}件</span>
                  </div>
                </div>
                <div v-if="goods.scribingPriceRange" class="flex mar-t-5" :style="{color:getAppInfo.style.color5}">
                  <span class="font-13 mar-r-2">原价</span>
                  <span
                  :class="goods.promotionId ? 'ellipsis-promotion' : ''"
                  class="font-over font-13 ellipsis">¥{{ goods.scribingPriceRange }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="single" :style="{'border-color': 'transparent transparent transparent ' + getAppInfo.style.color6}"></div>
          <div class="right count-down-box font-12">
            <div :style="{color:getAppInfo.style.color8}">距离{{ goods.activityType === 2 ? '社区团购' : '秒杀' }}结束</div>
            <div class="count-down">
              <van-count-down use-slot :time="promotionEndTime" @change="onCountDownChange" @finish="onCountDownOver">
                <div :style="{color:getAppInfo.style.color8}">
                  <span class="square-block">{{timer.days}}</span>
                  <span class="mar-l-2 mar-r-2">天</span>
                  <span class="square-block">{{timer.hours}}</span>
                  <span class="mar-l-2 mar-r-2">:</span>
                  <span class="square-block">{{timer.minutes}}</span>
                  <span class="mar-l-2 mar-r-2">:</span>
                  <span class="square-block">{{timer.seconds}}</span>
                </div>
              </van-count-down>
            </div>
          </div>
        </div>
      </div>
      <!-- 正常价格 -->
      <div class="pad-l-15 pad-r-15 bg-color-white" v-else>
        <div class="flex v-align-c pad-t-9 pad-b-5">
          <div class="flex-item bg-color-white" style="width:100%">
            <div class="flex flex-between line-h-1">
              <div class='font-red font-21 font-w'>
                <div v-if="goods.skuFlag === 1">
                  <span class="font-12">¥</span>{{ goods.minPrice }}
                  <span v-if="goods.maxPrice && goods.maxPrice !== goods.minPrice">                    
                    <span>~ </span>
                    <span class="font-12">¥</span>{{ goods.maxPrice }}
                  </span>
                </div>
                <div v-else>
                  <span class="font-12">¥</span>{{ goods.bestPrice }}
                  <span v-if="goods.skuFlag !== 1 && goods.scribingPriceRange" class="font-over font-normal font-color-9 font-13">¥{{ goods.scribingPriceRange }}</span>
                </div>
              </div>
              <!-- 卖家可看 -->
              <div v-if="goods.shareShow" class="self-buy">{{getAppInfo.commissionAlias || '分销赚'}}{{goods.income}}元</div>
            </div>
            <div class="flex v-align-c pad-t-6">
              <div v-if="getAppInfo.memberTitle && goods.memberPrice" class="user-prise mar-r-9">{{ getAppInfo.memberTitle }}价</div>
              <div v-if="goods.skuFlag === 1 && goods.scribingPriceRange" class="font-over font-color-9 font-13 pad-t-2">¥{{ goods.scribingPriceRange }}</div>
            </div>
          </div>
        </div>        
      </div>
    </div>
    <div class="flex bg-color-white">
      <div class="flex-item pad-b-10 pad-l-15 pad-r-15">
        <div class="flex v-align-c font-12 mar-t--3">
          <div>
            <span>已售{{ goods.salesNum }}</span>
            <label v-for="(item, index) in listGoodsUnitType" :key="index">
              <label>{{ goods.unitType === item.value ? item.text : '' }}</label>
            </label>
          </div>
          <template v-if="goods.goodsType !== 10">
            <span class="pad-l-5 pad-r-5 font-color-9 font-10 mar-t--2">|</span>
            <div v-if="goods.stock >= 0">
              <span>仅剩{{ goods.stock }}</span>
              <label v-for="(item, index) in listGoodsUnitType" :key="index">
                <label>{{ goods.unitType === item.value ? item.text : '' }}</label>
              </label>
            </div>
          </template>
          <template v-if="goods.promotionId && isActiving && !isLowerShelf">
            <div class="flex-item"></div>
            <!-- 卖家可看 -->
            <div v-if="goods.shareShow" class="self-buy">{{getAppInfo.commissionAlias || '分销赚'}}{{goods.income}}元</div>
          </template>
        </div>
        <div class="flex flex-between coupon-row mar-t-11" v-if="showCouponList.length > 0" @click="showCouponEls">
          <div class="v-align-c">
            <div class="coupon-info font-10" v-for="(item, index) in showCouponList" :key="index">
              <!-- couponType 10:代金券  20:满减券  30:折扣券 -->
              <span v-if="item.couponType===10">{{item.cashAmount}}元代金券</span>
              <span v-if="item.couponType===20">满{{item.fullAmount}}减{{item.reduceAmount}}</span>
              <span v-if="item.couponType===30">
                <span v-if="item.fullAmount && item.fullAmountFlag !== 1">满{{item.fullAmount}}享{{item.discountPercent}}折</span>
                <span v-else>全场享{{item.discountPercent}}折</span>
              </span>
            </div>
          </div>
          <div class="v-align-c">
            <span>领券</span>
            <van-icon class="mar-l-10" name="arrow" color="#ED4836" />
          </div>
        </div>
        <div class="title-share-bar">
          <div class="title-point width-290 pad-b-14">
            <div class="mar-t-11 font-w font-18">{{ goods.title }}</div>
            <div v-if="goods.sellPoint" class="font-13 font-color-9 mar-t-4">{{ goods.sellPoint }}</div>
          </div>
          <div class="share-ri pad-l-10 pad-r-10 pad-t-6 pad-b-14 mar-l-16 mar-t-10 mar-r--10 align-c" @click="goShowShare">
            <img v-if="fileSpace" class="width-20 height-20" :src="fileSpace + '/images/icon-share-7.png'" alt="">
            <div class="font-10 font-color-6">分享</div>
          </div>
        </div>
        <!-- 跨境发货、税费信息 -->
        <div v-if="goods.crossBorderType === 2" class="cross-boder-inf mar-l--15 mar-r--15">
          <div class="flex v-align-t font-15">
            <div class="font-w mar-r-15">发货</div>
            <img
              v-if="goods.countryNationalFlagUrl"
              class="icon-country-c mar-t-6 mar-r-6"
              mode="widthFix"
              :src="goods.countryNationalFlagUrl"
              alt="">            
            <div class="flex-item">{{ goods.countryName }}丨{{ goods.isIncludeTaxTips }}</div>
          </div>
          <div v-if="goods.comprehensiveTaxAmount * 1 > 0" class="flex v-align-c font-15 pad-t-6">
            <div class="font-w mar-r-15">税费</div>
            <div><span class="font-12 pad-r-4">¥</span>{{ goods.comprehensiveTaxAmount }}</div>
          </div>
        </div>
        <div class="delivery-shop mar-l--15 mar-r--15">
          <div class="pad-l-15 pad-r-10 pad-t-6 pad-b-8 mar-t-8">
            <div class="flex mar-t--1">
              <span class="font-15 font-w pad-r-15">当前店铺</span>
              <span class="font-15 flex-item pad-r-15">{{ currentPickup.takeName ? currentPickup.takeName : memberInfo.nickname }}</span>
              <!-- 门店类型，取门店电话 -->
              <div
                v-if="deliveryNum === 4 && memberInfo.memberStore && memberInfo.memberStore.storePhone"
                class="flex v-align-c"
                @click="$pt.makePhoneCall({phoneNumber: currentPickup.phone ? currentPickup.phone : memberInfo.memberStore.storePhone})">
                <span class="font-13 font-color-6">联系客服</span>
                <icon class="iconfont icon-arrow-right icon-next font-14 font-color-6"></icon>
              </div>
              <!-- 其他类型，取店长电话 -->
              <div
                v-if="deliveryNum !== 4 && memberInfo.phone"
                class="flex v-align-c"
                @click="$pt.makePhoneCall({phoneNumber: memberInfo.phone})">
                <span class="font-13 font-color-6">联系客服</span>
                <icon class="iconfont icon-arrow-right icon-next font-14 font-color-6"></icon>
              </div>
            </div>
          </div>
          <div v-if="!storeOff && (deliveryNum === 3 || deliveryNum === 4)" class="flex font-15 pad-l-15 pad-r-10 pad-b-4">
            <div class="pad-r-15 font-w" v-if="currentPickup.takeAddress">配送信息</div>
            <div class="flex-item">
              <div v-if="deliveryNum === 3">现在下单，<span class="add-time-t">明天可提货</span></div>
              <div v-else-if="deliveryNum === 4 && memberInfo.memberStore && (memberInfo.memberStore.isHomeDelivery || memberInfo.memberStore.isStoreExtraction)">现在下单，<span class="add-time-t">{{ serviceTime }}</span></div>
              <div
                class="flex v-align-c"
                @click="openLocation(currentPickup.latitude, currentPickup.longitude, currentPickup.takeAddress)">
                <div v-if="currentPickup.takeAddress">{{ deliveryNum === 3 ? '提货点：' : '门店地址：' }}</div>
                <div v-if="currentPickup.takeAddress" class="flex-item line-1 mar-t-1">{{ currentPickup.takeAddress }}</div>
                <icon
                  v-if="currentPickup.takeAddress"
                  class="iconfont icon-arrow-right icon-next font-14 font-color-6"></icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 佣金说明 -->
      <div class="popup explain-popup" v-show="projectGoodsPopUp">
        <div class="popup-item">
          <div class="title">分销攻略</div>
          <div class="centent">
            <h5>1.如何赚取分销佣金？</h5>
            <p>a.分销库 → 添加商品到店铺</p>
            <p>b.分享店铺商品给好友 → 好友付费购买 → 获得分销佣金</p>
            <p>c.好友主动到店铺 → 付费购买 → 获得分销佣金</p>
            <h5>2.如何提现分销佣金？</h5>
            <p>个人中心 → 我的钱包 → 申请提现</p>
            <p>注：微客(分销商)获得的佣金默认状态为"待结算"需满足"俩个条件"才可提现。</p>
            <p>a.获得佣金后在48小时内系统自动对账后。</p>
            <p>b.卖家发货后。</p>
          </div>
          <div class="btn"><span @click="popClose">朕知道了</span></div>
        </div>
      </div>
      <!-- 佣金说明 -->
      <div class="popup explain-popup" v-show="userGoodsPopUp">
        <div class="popup-item">
          <div class="title">佣金攻略</div>
          <div class="centent">
            <h5>1.如何赚取顾客佣金？</h5>
            <p>开通高级版智能店铺 → 设置自营商品顾客佣金 → 好友分销商品 → 好友获得顾客佣金。</p>
            <h5>2.如何提现分销佣金？</h5>
            <p>个人中心 → 我的钱包 → 申请提现</p>
            <p>注：微客(分销商)获得的佣金默认状态为"待结算"需满足"俩个条件"才可提现。</p>
            <p>a.获得佣金后在48小时内系统自动对账后。</p>
            <p>b.卖家发货后。</p>
          </div>
          <div class="btn"><span @click="popClose">朕知道了</span></div>
        </div>
      </div>
    </div>
    <div class="free-shipping height-44 bg-color-white v-align-c mar-t-10 pad-l-15 pad-r-15" v-if="goods.postFeePromotion">
      <div class="font-15 font-w">活动</div>
      <div class="shipping-span font-12 mar-l-12 height-15">
        <div class="height-15 flex flex-center">包邮</div>
      </div>
      <div class="mar-l-8 font-12">单商品满{{goods.postFeePromotion.fullPrice}}包邮</div>
    </div>
    <div class="detail mar-t-11 pad-t-20 " v-if="goods.memberStore">
      <div class="detail-text line-h-1 mar-b-15">
        <span class="detail-title font-16 font-w pad-l-15 pad-r-15">商家信息</span>
      </div>
      <div v-if="goods.memberStore" class="pad-l-15 pad-r-15 pad-b-15">
        <div class="flex v-align-c pad-t-4 pad-b-4 font-color" v-if="goods.memberStore.storeName">
          <label class="flex-item">{{ goods.memberStore.storeName }}</label>
        </div>
        <div class="flex v-align-c pad-t-4 pad-b-4" v-if="goods.memberStore.businessHour">
          <span>营业时间：</span>
          <label class="flex-item">{{ goods.memberStore.businessHour }}</label>
        </div>
        <div class="flex v-align-c pad-t-4 pad-b-4 pad-r-12" v-if="goods.memberStore.storePhone" @click="$pt.makePhoneCall({phoneNumber: goods.memberStore.storePhone})">
          <span>商家电话：</span>
          <label class="flex-item">{{ goods.memberStore.storePhone }}</label>
          <label class="store-btn font-13 pad-l-6 pad-r-6">拨打</label>
        </div>
        <div
          v-if="goods.memberStore.storeAddress"
          class="flex v-align-t pad-t-4 pad-b-4 pad-r-12"
          @click="openLocation(goods.memberStore.latitude, goods.memberStore.longitude, goods.memberStore.storeAddress)">
          <label class="flex-item">{{ goods.memberStore.storeAddress }}</label>
          <label class="store-btn font-13 mar-t-1 pad-l-6 pad-r-6">导航</label>
        </div>
      </div>
    </div>
    <template v-if="(goods.goodsParameters && goods.goodsParameters.length) || (goods.details && goods.details.length)">
      <div class="detail mar-t-11 pad-t-20">
        <div class="detail-text line-h-1 mar-b-15">
          <span class="detail-title font-16 font-w pad-l-15 pad-r-15">商品信息</span>
        </div>
        <div class="pad-l-15 pad-r-15 font-14">
          <div
            class="parameter-bar flex pad-t-13 pad-b-13"
            v-for="(item,index) in goods.goodsParameters"
            :key="index">
            <span class="font-color-9 mar-r-15">{{item.parameterName}}</span>
            <span class="flex-item">{{item.parameterValue}}</span>
          </div>
        </div>
        <div class="align-c">
          <show-rich-text v-if="detailsBoolean" :fromGoodsId="goods.goodsId" :content="goods.details" type="shopDetail"></show-rich-text>
        </div>
      </div>
    </template>
    <div class="pad-22"></div>
    <div v-if="library" class="library-wrap" catchtouchmove='true'>
      <div class="mar-r-10 align-c" @click="updateShowHomePage" v-if="goods.upperShelfFlag === 1">
        <van-icon name="star" size="18px" :color="goods.showHomePage === 1 ? getAppInfo.style.color2 : '#EAEAEA'" />
        <div class="font-9 mar-t-2">推荐</div>
      </div>
      <div class="operation-bar flex-item">
        <div class="operation-btn upper" v-if="goods.upperShelfFlag === 0" @click="updateShelfFlag(1)">+上架</div>
        <div class="operation-btn lower" v-if="goods.upperShelfFlag === 1" @click="updateShelfFlag(0)">下架</div>
        <div class="operation-btn" v-show="goods.buyFlag===1" @click="getSkuBuy(false)" :style="{'background-color': getAppInfo.style.color2, color: getAppInfo.style.styleType === 10 ? getAppInfo.style.color4 : '#fff'}">立即购买</div>
      </div>
    </div>
    <div class="flex bottom-btn" v-if="!library && !isLowerShelf">
      <div class="item-bottom flex">
        <ul class="flex">
          <li @click="backHome">
            <div class="height-21">
              <img v-if="fileSpace" :src="fileSpace + '/images/detail-home.png'" alt="" class="icon width-19 height-19" mode="widthFix">
            </div>
            <div class="item-b-txt">首页</div>
          </li>
          <li class="pos-rel" @click="goToCart">
            <div class="height-21">
              <img v-if="fileSpace" :src="fileSpace + '/images/detail-cart.png'" alt="" class="icon width-19 height-19" mode="widthFix">
            </div>
            <div class="item-b-txt">购物车</div>
            <div class="badge">
              <cart-badge ref="cartBadge"></cart-badge>
            </div>
          </li>
        </ul>
        <div class="btn flex line-h-1">
          <span v-show="goods.buyFlag===1" @click="getSkuBuy(true)" :style="{'background-color': getAppInfo.style.color4}">加入购物车</span>
          <span v-show="goods.buyFlag===1" @click="getSkuBuy(false)" :style="{'background-color': getAppInfo.style.color2, color: getAppInfo.style.styleType === 10 ? getAppInfo.style.color4 : '#fff'}">立即购买</span>
        </div>
      </div>
    </div>    
    <div class="count-down-fixed" v-if="false">
      <div class="count-down-box">
        <div class="font-15">距离开抢时间</div>
        <div class="font-18">1天 23时 59分 59秒</div>
      </div>
    </div>
    <div class="shop-null-fixed" v-if="isLowerShelf">
      <div class="shop-null-box">
        <div class="icon-box" @click="backHome">
          <img v-if="fileSpace" :src="fileSpace + '/images/detail-home.png'" alt="" class="icon width-17 height-17" mode="widthFix">
          <div class="item-b-txt font-10">首页</div>
        </div>
        <div v-if="(goods.totalLimitNum > 0 && goods.limitNum === 0) && goods.stock" class="shop-null font-18">商品已达限购数</div>
        <div v-else class="shop-null font-18">{{ goods.stock ? '商品已下架' : '商品已售空' }}</div>
      </div>
    </div>
    <div class="div-pop" v-if="showShare" @click="showShare=false" catchtouchmove="true">
      <div class="div-share border-t line-h-1">
        <div class="v-align-c height-170">
          <div class="flex-item pos-rel align-c">
            <button open-type="share" class="share-btn"></button>
            <img v-if="fileSpace" mode="widthFix" class="width-70 height-70" :src="fileSpace + '/images/detail-s-cion-1.png'" />
            <div class="pad-t-10">
              分享好友
            </div>
          </div>
          <div class="flex-item align-c" @click="createPoster">
            <img v-if="fileSpace" mode="widthFix" class="width-70 height-70" :src="fileSpace + '/images/detail-s-cion-2.png'" />
            <div class="pad-t-10">
              生成海报
            </div>
          </div>
          <div class="flex-item align-c" @click="goMaterial">
            <img v-if="fileSpace" mode="widthFix" class="width-70 height-70" :src="fileSpace + '/images/detail-s-cion-3.png'" />
            <div class="pad-t-10">
              朋友圈素材
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="div-pop" v-if="isCreatePoster" @click="isCreatePoster=false" catchtouchmove="true">
      <div class="create-poster">
        <canvas canvas-id="shareCanvas" class="share-canvas"></canvas>
      </div>
      <div class="save-img" @click="saveToAlbum('shareCanvas')">
        <button size="default" class="primary-button">保存</button>
      </div>
    </div>
    <!-- 优惠券领取弹窗 -->
    <div class="mask-layer" v-show="showCouponAction" catchtouchmove="true" @click="showCouponAction = false"></div>
    <div class="action-wrap" v-show="showCouponAction" catchtouchmove="true">
      <div class="head-row">
        <div>领取优惠券</div>
      </div>
      <scroll-view class="action-popup" :scroll-y="true">
        <div class="action-main">
          <div class="list" v-if="!nodata">
            <div v-for="(item, index) in couponList" :key="index" class="mar-b-15">
              <coupon v-if="item" :coupon="item" :showExpend="false" :actionId="item.actionId"></coupon>
            </div>
          </div>
          <div class="pad-10 mar-t-10 align-c" v-else>
            <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30" :src="fileSpace + '/images/2-0-kong.png'" />
            <div class="pad-t-20 font-14 font-gray">空空如也</div>
          </div>
        </div>
      </scroll-view>
      <div class="action-footer" @click="showCouponAction = false">完成</div>
    </div>
    <!-- 微信群添加弹窗 -->
    <div class="div-pop add-group-box" v-if="showWechat" @click="showWechat=false" catchtouchmove="true">
      <div class="add-group-main">
        <div class="main-title">加群方案</div>
        <div class="main-plan-1">
          <div class="paln-1">
            <span class="font-color">方案1：</span>保存下面客服二维码到手机相册，再用微信扫一扫识别添加客服微信。
            <span class="font-blue" @click="saveToAlbum('qrCodeCanvas')">保存二维码</span>
          </div>
          <div class="qr-code mar-t-5">
            <canvas canvas-id="qrCodeCanvas" class="qr-code-canvas"></canvas>
          </div>
          <div class="flex flex-between font-color-6 font-12 mar-t-10">
            <div><span>微信号：</span>{{addGroundInfo.wechatNo}}</div>
            <div class="font-blue" @click="$pt.setClipboardData({data: 'Mr_9901'})">复制</div>
          </div>
          <div class="flex flex-between font-color-6 font-12 mar-t-12">
            <div><span>联系电话：</span>{{addGroundInfo.personPhone}}</div>
            <div class="font-blue" @click="$pt.makePhoneCall({phoneNumber: '13023123123'})">拨打</div>
          </div>
        </div>
        <div class="main-plan-2">
          方案2：点击下方<span class="font-blue">“在线客服”</span>发送<span class="font-blue">“0”</span>，即可添加客服微信进群。
        </div>
        <div>
          <button open-type="contact" class="mar-t-11 online-service">在线客服</button>
        </div>
        <div class="align-c font-12 mar-t-3 mar-b-3 font-color-6">
          工作日&nbsp;&nbsp;上午9:00 ~ 下午18:00
        </div>
      </div>
      <!-- 关闭按钮 -->
      <div class="cross-btn">
        <van-icon name="cross" size="24px" color="#fff" />
      </div>
    </div>
    <!--sku选择-->
    <get-sku-buy v-if="getAppInfo.style" ref="getSkuBuy"
      :goodsType="goodsType" :styleColor="getAppInfo.style"
      :room_id="room_id" :goodsData="goods" :skuPropList="skuPropList" :deliveryTypes ="deliveryTypes"
      :skuList="skuList" :values="values" @finished="getSkuBuyFinished"></get-sku-buy>
    <upper-category ref="upperCategory" @setGoodsStatus="setGoodsStatus"></upper-category>
    <div class="fix-r-btn flex-col">      
      <!-- 回我店铺 -->
      <div class="align-r pad-r-13">
        <back-btn v-if="backBoolean" />
      </div>
      <!-- 悬浮按钮 -->
      <div class="align-r pad-r-7">
        <float-btn :floatList="floatList" :goodsData="goods" urlFrom="shopDetail" v-if="floatBoolean" @userInfo="userInfo"/>
      </div>
    </div>
    <div class="pad-10"></div>
  </div>
</template>

<script>
import GetUserInfo from '@/components/GetUserInfo'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import ShowRichText from '@/components/CustomRichText/ShowRichText'
import CartBadge from '../components/CartBadge'
import GetSkuBuy from '@/components/GetSkuBuy'
import UpperCategory from '@/components/UpperCategory'
import {
  getUserGoodsByGoodsId,
  listGoodsUnitType,
  getProjectGoodsSku,
  getPersonalSupport
} from '@/api/shop'
import { shareGoods, visitGoods } from '@/api/accessStat'
import {
  setMemberId, setCustomerId, setShowBuyCard,
  setToken, setVeekrayStatus
} from '@/utils/auth'
import { getMemberInfo } from '@/api/home'
import {
  listCouponByGoodsId,
  updateShelfFlag,
  updateShowHomePage
} from '@/api/personal'
import { listEnterpriseMessageConfig, getAppInfo, getCustomerPhone } from '@/api/common'
import BackBtn from '@/components/BackBtn'
import FloatBtn from '@/components/FloatBtn'
import Coupon from '@/components/Coupon'
import { appColor } from '@/api/appColor'
import { getAuth } from '@/api/login'
import { navList } from '@/api/navList'

export default {
  components: {
    GetUserInfo,
    GetPhoneInfo,
    ShowRichText,
    CartBadge,
    GetSkuBuy,
    UpperCategory,
    BackBtn,
    FloatBtn,
    Coupon
  },
  data() {
    return {
      skuBuyType: null,
      userGoodsPopUp: false,
      projectGoodsPopUp: false,
      goods: {
        goodsId: '',
        goodsParameters: [],
        details: [],
        goodsType: 1,
        goodsStatus: 1,
        skuPropList: [],
        skuList: [],
        values: []
      },
      skuPropList: [],
      skuList: [],
      values: [],
      listGoodsUnitType: [],
      scrollTop: 0,
      showShare: false,
      topBoolean: true,
      isCreatePoster: false,
      isGetUserInfo: false,
      isGetPhoneInfo: false,
      isGetLocalInfo: false,
      isGetStoreOff: false,
      shareMemberId: null,
      showPara: false,
      showWechat: false,
      storeCardFlag: null,
      memberInfo: {},
      customerInfo: {},
      goodsFlag: true,
      qty: '',
      goodsType: 0,
      timer: {},
      sellPage: false, // 判断是否从分销库或者企业库进来的
      promotionEndTime: '', // 倒计时结束时间
      countDown: null,
      isActiving: false, // 活动进行中
      isLowerShelf: false, // 是否下架
      addGroundInfo: {}, // 加群信息
      backBoolean: false,
      custom_params: {},
      room_id: '',
      floatBoolean: false,
      floatList: [],
      showCouponAction: false,
      showCouponList: [], // 优惠券信息
      nodata: false, // 优惠券列表是否有数据
      couponList: [], // 商品可用优惠券列表
      messageIds: [],
      getAppInfo: {
        style: {}
      },
      loadNum: 0,
      detailsBoolean: false,
      library: false,
      currentIndex: 0,
      customerPhone: '',
      skeletonLoading: true,
      currentPickup: {},
      deliveryTypes: [],
      deliveryNum: null, // 1 快递配送类型  3 社区类型  4门店类型(权限 1 < 3 < 4)
      sendbusinessStartTime: '',
      storeOff: false,
      serviceTime: '',
      viewBoolean: false,
      skuFinished: true
    }
  },
  computed: {
    isIPhoneX() {
      return this.$utils.isIPhoneX()
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    if (!this.$pt.getStorageSync('appInfo')) {
      this.getAppEls()
    } else {
      this.getAppInfo = this.$pt.getStorageSync('appInfo')
    }
    this.getAuth()
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
    let sysInfo = ''
    sysInfo = this.$pt.getSystemInfoSync()
    if (sysInfo.system.indexOf('iOS') === -1) {
      // android类型
      this.$pt.setStorageSync('iOS', false)
    } else {
      this.$pt.setStorageSync('iOS', true)
    }
    this.$pt.setStorageSync('devW', wx.getSystemInfoSync().windowWidth)
  },
  onShareAppMessage() {
    // 分享商品埋点
    if (this.getCustomerId) {
      shareGoods(this.getMemberId, this.goods.goodsId)
    }
    return {
      title: this.goods.title,
      imageUrl: this.goods.shareImageUrl || this.goods.images[0],
      path: 'pages/shop/detail/main?memberId=' + this.getMemberId + '&goodsId=' + this.goods.goodsId +
        '&goodsType=' + this.goods.goodsType + '&shareMemberId=' + this.getCustomerId
    }
  },
  onShareTimeline() {
    return {
      title: this.goods.title,
      imageUrl: this.goods.shareImageUrl || this.goods.images[0],
      query: 'memberId=' + this.getMemberId + '&goodsId=' + this.goods.goodsId +
        '&goodsType=' + this.goods.goodsType + '&shareMemberId=' + this.getCustomerId
    }
  },
  // 页面滚动执行方式
  onPageScroll(event) {
    // 避免页面抖动
    if (this.scrollTop === 0 || event.scrollTop === 0) {
      this.scrollTop = event.scrollTop
    }
  },
  onShow() {
    this.loadNum = 0
    if (this.viewBoolean) return
    this.$pt.removeStorageSync('skuParams')
    if (this.getCurrentPage().query.flowNo) {
      this.$pt.setStorageSync('flowNo', this.getCurrentPage().query.flowNo)
    }
    if (this.getCurrentPage().query.externalUserId) {
      this.$pt.setStorageSync('externalUserId', this.getCurrentPage().query.externalUserId)
    } else {
      this.$pt.removeStorageSync('externalUserId')
    }
    if (this.getCurrentPage().query.custom_params) {
      this.custom_params = JSON.parse(decodeURIComponent(this.getCurrentPage().query.custom_params))
      if (this.custom_params.liveShareMemberId) {
        this.$utils.setMyId(this.custom_params.liveShareMemberId)
        setMemberId(this.custom_params.liveShareMemberId)
        this.shareMemberId = this.custom_params.liveShareMemberId
      }
      if (this.getCurrentPage().query.room_id) {
        this.room_id = this.getCurrentPage().query.room_id
      }
    }
    if (this.getCurrentPage().query.library) {
      this.library = true
      this.$pt.hideShareMenu()
    }
    // 清除分类缓存分类ID
    this.$pt.removeStorageSync('categoryInfo')
    // 当前自提点
    if (this.$pt.getStorageSync('currentPickup')) {
      this.currentPickup = this.$pt.getStorageSync('currentPickup')
    }
    // 确认订单页进入切换自提点页面
    if (this.$pt.getStorageSync('siteMemberId')) {
      this.$pt.removeStorageSync('siteMemberId')
    }
  },
  mounted() {
    this.getAppEls()
  },
  onPullDownRefresh() {
    this.skeletonLoading = true
    this.getAppEls()
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 500)
  },
  methods: {
    getCustomerPhone(enterpriseId) {
      if (!enterpriseId) return
      getCustomerPhone({
        enterpriseId: enterpriseId
      }).then((response) => {
        if (response.isError) return
        this.customerPhone = response.data
      }).catch(() => {
      })
    },
    moveSwiper(e) {
      this.currentIndex = e.mp.detail.current
    },
    initEls() {
      this.setMethodInitData('pages/shop/detail/main', 'initListCategory')
      this.listCouponByGoodsId()
      this.messageConfig()
      this.detailsBoolean = false
      this.initUserGoods()
      if (this.getCustomerId) {
        this.backBoolean = false
        let urlFrom = this.getCurrentPage().query.urlFrom
        if (urlFrom === 'sellPage') {
          // 判断是否来自分销库或企业库
          this.sellPage = true
        }
      } else {
        this.$pt.setStorageSync('detailIncome', true)
      }
      this.$utils.setMyId(this.getMemberId)
      this.$root.$mp.appOptions.query = {}
      let queryMemberId = this.getCurrentPage().query.memberId
      if (queryMemberId) {
        this.$utils.setMyId(queryMemberId)
        this.$root.$mp.appOptions.query = {}
        setMemberId(queryMemberId)
      }
      this.initAddGround()
    },
    userInfo(res) {
      if (!this.getCustomerId) {
        this.isGetUserInfo = true
      } else if (!this.getPhone) {
        this.isGetPhoneInfo = true
      }
      this.showBackBtn = true
    },
    getAppEls() {
      getAppInfo().then((response) => {
        if (response.isError) return
        let getAppInfo = response.data
        if (getAppInfo.enterpriseId) {
          navList(getAppInfo.enterpriseId)
          this.getCustomerPhone(getAppInfo.enterpriseId)
        }
        this.getAppInfo = appColor(getAppInfo)
        this.initEls()
      }).catch(() => {
      })
    },
    getAuth() {
      this.$pt.login({
        success(res) {
          if (res.code) {
            getAuth(res.code).then((response) => {
              setShowBuyCard(response.data.showBuyCard)
              setToken(response.data.token)
              if (response.data.customerId) {
                setCustomerId(response.data.customerId)
              }
              if (response.data.veekrayStatus) {
                setVeekrayStatus(response.data.veekrayStatus)
              }
            }).catch(() => {
            })
          }
        }
      })
    },
    showCouponEls() {
      if (this.getCustomerId && this.getPhone) {
        let that = this
        let rejectArr = []
        if (!this.messageIds.length) {
          this.showCouponAction = true
          return
        }
        this.$pt.requestSubscribeMessage({
          tmplIds: that.messageIds,
          success: function(res) {
          // 成功
            Object.keys(res).forEach(key => {
              if (res[key] === 'reject') {
                rejectArr.push(key)
              }
            })
            if (rejectArr.length) {
              that.messageIds = rejectArr
              that.$utils.showToast({ title: '请允许消息通知！' })
            } else {
              that.showCouponAction = true
            }
          },
          fail(err) {
          // 失败
            console.error(err)
          }
        })
      } else {
        if (!this.getCustomerId) {
          this.isGetUserInfo = false
          setTimeout(() => {
            this.isGetUserInfo = true
          }, 100)
        } else if (this.getCustomerId && !this.getPhone) {
          this.isGetPhoneInfo = true
        }
      }
    },
    goShowShare() {
      if (this.getCustomerId) {
        if (this.getPhone) {
          this.showShare = true
        } else {
          this.isGetPhoneInfo = true
        }
      } else {
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
      }
    },
    messageConfig() {
      if (!this.getMemberId) return
      this.messageIds = []
      const dataArr = ['1401', '1402']
      let dataStr = dataArr.toString()
      if (!this.getMemberId) return
      listEnterpriseMessageConfig({
        memberId: this.getMemberId,
        ascriptionTypes: dataStr
      }).then((response) => {
        if (response.isError) return
        response.data.forEach(item => {
          if (item.miniMadeId) {
            this.messageIds.push(item.miniMadeId)
          }
        })
      }).catch(() => {
      })
    },
    layerMyShop() {
      const that = this
      if (that.$pt.getStorageSync('otherShop')) {
        that.backBoolean = true
        return
      }
      this.$pt.showModal({
        title: '温馨提示',
        content: '您正在访问其他卖家的店铺，确定继续访问吗？',
        cancelText: '继续访问',
        cancelColor: '#000000',
        confirmText: '回我的店',
        confirmColor: '#ffb003',
        success(res) {
          if (res.confirm) {
            // 回我的店
            that.$pt.removeStorageSync('otherShop')
            that.$pt.setStorageSync('personalType', 1)
            that.backBoolean = false
            that.$utils.setMyId(that.getCustomerId)
            that.$root.$mp.appOptions.query = {}
            that.$pt.reLaunch({ url: '/pages/home/main' })
          } else if (res.cancel) {
            // 继续访问
            that.$pt.setStorageSync('otherShop', true)
            that.backBoolean = true
          }
        }
      })
    },
    backHome() {
      if (this.getCustomerId) {
        if (this.getPhone) {
          this.$pt.reLaunch({ url: '/pages/home/main' })
        } else {
          this.isGetPhoneInfo = true
        }
      } else {
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
      }
    },
    authPhoneInfo() {
      this.isGetPhoneInfo = true
    },
    initAddGround() {
      getPersonalSupport().then(response => {
        if (response.isError) return
        this.addGroundInfo = response.data
      })
    },
    openLocation(latitude, longitude, storeAddress) {
      if (!latitude || !longitude) return
      this.$pt.openLocation({
        latitude: Number(latitude),
        longitude: Number(longitude),
        address: storeAddress,
        success: res => {
          this.viewBoolean = true
        }
      })
    },
    // 会员基本信息
    initCustomerInfo() {
      if (!this.getCustomerId) return
      getMemberInfo(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.customerInfo = response.data
        if (this.getCustomerId) {
          // unionId不存在，弹出微信重新授权，打通多个小程序之间的数据
          if (!this.customerInfo.unionId && this.getShowBuyCard) {
            this.isGetUserInfo = false
            setTimeout(() => {
              this.isGetUserInfo = true
            }, 100)
          }
        }
      }).catch(() => {
      })
    },
    // 会员基本信息
    initMemberInfo() {
      this.initCustomerInfo()
      getMemberInfo(this.getMemberId).then((response) => {
        if (response.isError) return
        this.memberInfo = response.data
        if (this.memberInfo.nickname) {
          this.memberInfo.nickname = this.$utils.getStrByLens(this.memberInfo.nickname, 16)
        }
      }).catch(() => {
      })
    },
    detailBack() {
      this.skeletonLoading = true
    },
    initUserGoods() {
      this.loadNum++
      if (this.loadNum < 2) {
        this.skeletonLoading = true
      }
      setTimeout(() => {
        // 弹出提示，是否回我店铺提示
        this.backBoolean = false
        if (this.getCustomerId) {
          if (this.getShowBuyCard !== false && this.getVeekrayStatus === 1 && !this.checkOwner && this.getCustomerId) {
            this.layerMyShop()
          }
        } else {
          setTimeout(() => {
            if (this.getShowBuyCard !== false && this.getVeekrayStatus === 1 && !this.checkOwner && this.getCustomerId) {
              this.layerMyShop()
            }
          }, 1200)
        }
        const shareMemberId = this.getCurrentPage().query.shareMemberId
        if (shareMemberId && !this.checkOwner) {
          this.$pt.setStorageSync('shareMemberId', shareMemberId)
          this.shareMemberId = shareMemberId
        }
        if (this.$pt.getStorageSync('shareMemberId') && !this.checkOwner) {
          this.shareMemberId = this.$pt.getStorageSync('shareMemberId')
        }
        // console.log('shop detail onShow, shareMemberId: ' + this.shareMemberId)
        const goodsId = this.getCurrentPage().query.goodsId
        const goodsType = this.getCurrentPage().query.goodsType
        if (!goodsId) return
        // 访问商品埋点
        if (this.getShowBuyCard) {
          if (this.getCustomerId && this.getMemberId) {
            visitGoods(this.getMemberId, goodsId)
          }
        }
        this.goods.goodsId = goodsId
        this.goods.goodsType = goodsType
        let data = {
          goodsId: goodsId,
          goodsType: goodsType,
          memberId: this.getMemberId ? this.getMemberId : this.getAppInfo.defaultMemberId,
          customerId: this.getCustomerId
        }
        const comissionFlag = this.getCurrentPage().query.comissionFlag
        if (comissionFlag) {
          data.comissionFlag = comissionFlag
        }
        if (!this.getShowBuyCard) {
          data.customerId = this.getMemberId
        }
        this.detailBack()
        setTimeout(() => {
          this.skeletonLoading = false
        }, 200)
        this.skuFinished = true
        getUserGoodsByGoodsId(data).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          // 处理商品详情图片大小
          if ('details' in response.data) {
            for (const item of response.data.details) {
              if ('text' in item) {
                if (item.text.indexOf('max-width') < 0) {
                  item.text = item.text.replace(/src=/g, 'style="max-width:100%" src=')
                }
                // 调整淘宝商品设置了固定值750.0px
                if (item.text.indexOf('max-width: 750.0px') !== -1) {
                  item.text = item.text.replace(/max-width: 750.0px/g, 'max-width: 100%')
                }
              }
            }
          }
          response.data.unitType = response.data.unitType ? response.data.unitType.toString() : '1'
          let resGoods = response.data
          // 商品配送类型
          if (resGoods.deliveryTypes) {
            this.deliveryTypes = resGoods.deliveryTypes
          }
          if (this.deliveryTypes.length) {
            if (this.deliveryTypes.indexOf(1) !== -1) {
              // 快递配送类型
              this.deliveryNum = 1
            }
          }
          if (resGoods.promotionEndTime) {
            this.isActiving = true
            this.promotionEndTime = this.$utils.formatTimeStamp(resGoods.promotionEndTime) - new Date().getTime()
          }
          if (resGoods.skuFlag === 1) {
            // 多规格商品
            if ((resGoods.minScribingPrice * 1) && (resGoods.maxScribingPrice * 1)) {
              if (resGoods.minScribingPrice === resGoods.maxScribingPrice) {
                resGoods.scribingPriceRange = resGoods.minScribingPrice
              } else {
                resGoods.scribingPriceRange = resGoods.minScribingPrice + '~¥' + resGoods.maxScribingPrice
              }
            }
          } else {
            // 单规格商品
            resGoods.scribingPriceRange = resGoods.scribingPrice
          }
          this.goodsType = response.data.goodsType
          // resGoods.totalLimitNum = 3
          // resGoods.limitNum = 0
          if (resGoods.buyFlag !== 1 || resGoods.goodsStatus !== 1 || (resGoods.totalLimitNum > 0 && resGoods.limitNum === 0)) {
            // 判断商品是否展示下架
            this.isLowerShelf = true
          }
          // 分销赚展示判断 (在自己的店铺中才需要展示分销佣金)
          resGoods.shareShow = false
          if (resGoods.income && resGoods.income > 0 && (this.getMemberId === this.getCustomerId)) {
            resGoods.shareShow = true
          }
          const changeData = resGoods.shareShow
          this.$delete(resGoods, 'shareShow')
          this.$set(resGoods, 'shareShow', changeData)
          if (!resGoods.details) {
            resGoods.details = []
          }
          this.goods = resGoods
          this.detailsBoolean = false
          setTimeout(() => {
            this.detailsBoolean = true
          }, 100)
          this.initMemberInfo()
          this.initListGoodsUnitType()
          if (this.goods.skuFlag === 0) {
            this.skuFinished = false
          }
          this.getProjectGoodsSku()
          if (this.goods.floatButtonList) {
            if (!this.getShowBuyCard) return
            if (this.goods.floatButtonList.length) {
              this.floatBoolean = true
              this.floatList = this.goods.floatButtonList
            } else {
              this.floatBoolean = false
            }
          }
        }).catch(() => {
        })
      }, 200)
    },
    getProjectGoodsSku() {
      this.skuFinished = true
      getProjectGoodsSku({
        goodsId: this.goods.goodsId,
        customerId: this.getCustomerId,
        memberId: this.getMemberId,
        microShopFlag: this.goods.goodsType === 30 || this.goods.goodsType === 31 || this.goods.goodsType === 32 ? 0 : 1
      }).then((response) => {
        if (response.isError) return
        this.skuFinished = false
        // this.goods.skuPropList = response.data.skuPropList.reverse()
        this.goods.skuPropList = response.data.skuPropList
        this.goods.skuList = response.data.skuList
        this.goods.values = response.data.values
        this.skuPropList = response.data.skuPropList
        this.skuList = response.data.skuList
        this.values = response.data.values
      }).catch(() => {
      })
    },
    // 显示说明弹窗
    popShow() {
      if (this.goods.goodsType === 30) {
        this.projectGoodsPopUp = true
      } else {
        this.userGoodsPopUp = true
      }
    },
    // 关闭说明弹窗
    popClose() {
      this.userGoodsPopUp = false
      this.projectGoodsPopUp = false
    },
    // 价格单位
    initListGoodsUnitType() {
      if (!this.getMemberId) return
      listGoodsUnitType(this.getMemberId).then((response) => {
        if (response.isError) return
        this.listGoodsUnitType = this.$utils.objToArr(response.data, ['text', 'value'])
        this.listGoodsUnitType.forEach(item => {
          if (this.goods.unitType === item.value) {
            this.qty = item.text
          }
        })
      }).catch(() => {
      })
    },
    previewImage(current, images) {
      this.$pt.previewImage({
        urls: images,
        current: current,
        success: res => {
          this.viewBoolean = true
        }
      })
    },
    createPoster() {
      this.isCreatePoster = true
      this.drawPage()
    },
    drawPage() {
      const that = this
      // canvas 使用的是px，如果要适应屏幕需要转化
      let platIOS = false
      if (that.$pt.getSystemInfoSync().system.indexOf('iOS') !== -1) {
        platIOS = true
      }
      let rpx = that.$pt.getSystemInfoSync().windowWidth / 375
      that.$utils.showToast({
        title: '图片生成中',
        icon: 'loading',
        duration: 1000
      })
      const context = that.$pt.createCanvasContext('shareCanvas')
      // 清除画布，防止层叠
      context.clearRect(0, 0, 239 * rpx, 432 * rpx)
      // 背景色
      context.setFillStyle('#fff')
      context.fillRect(0, 0, 239 * rpx, 432 * rpx)
      if (!that.goods.posterImageUrl) {
      // 店长头像
        that.$pt.downloadFile({
          url: that.memberInfo.avatar,
          success: function(data) {
            context.drawImage(data.tempFilePath, 10, 10, 20, 20)
            context.draw(true)
          }
        })
        // 店长昵称
        context.setFillStyle('#7b7b7b')
        context.setFontSize(12)
        if (platIOS) {
          context.fillText(that.memberInfo.nickname, 35 * rpx, 23 * rpx)
        } else {
          context.fillText(that.memberInfo.nickname, 35 * rpx, 25 * rpx)
        }
        // 头部标题
        context.setFillStyle('#333333')
        context.setFontSize(12)
        let posterRecommend = this.goods.posterRecommend || '精选好货，推荐给你呀'
        if (platIOS) {
          context.fillText(posterRecommend, 10 * rpx, 43 * rpx)
        } else {
          context.fillText(posterRecommend, 10 * rpx, 46 * rpx)
        }
        // 中间区域 背景框
        that.$pt.downloadFile({
          url: 'https://veekrayimg.joinsun.vip/images/share-arrow-bg7.png',
          success: function(res) {
            context.drawImage(res.tempFilePath, 10 * rpx, 50 * rpx, 219 * rpx, 291 * rpx)
            context.draw(true)
          }
        })
      }
      // 产品图
      let posterImageUrl = that.goods.posterImageUrl ? that.goods.posterImageUrl + '?imageMogr2/gravity/North/crop/750x1087' : that.goods.images[0] + '?imageMogr2/gravity/North/crop/750x1375'
      that.$pt.downloadFile({
        url: posterImageUrl,
        success: function(img) {
          if (!that.goods.posterImageUrl) {
            context.drawImage(img.tempFilePath, 20 * rpx, 63 * rpx, 199 * rpx, 190 * rpx)
          } else {
            context.drawImage(img.tempFilePath, 0 * rpx, 0 * rpx, 239 * rpx, 340 * rpx)
          }
          context.draw(true)
        }
      })
      // 切割字符 展示最多两行商品标题
      context.setFillStyle('#333333')
      if (platIOS) {
        this.dealWords({
          ctx: context,
          fontSize: 11, // 字体大小
          word: that.goods.posterTitle || that.goods.title, // 需要处理的文字
          maxWidth: 190 * rpx, // 一行文字最大宽度
          x: 20 * rpx, // 文字在x轴要显示的位置
          y: 260 * rpx, // 文字在y轴要显示的位置
          maxLine: 2 // 文字最多显示的行数
        })
      } else {
        this.dealWords({
          ctx: context,
          fontSize: 11, // 字体大小
          word: that.goods.posterTitle || that.goods.title, // 需要处理的文字
          maxWidth: 190 * rpx, // 一行文字最大宽度
          x: 20 * rpx, // 文字在x轴要显示的位置
          y: 257 * rpx, // 文字在y轴要显示的位置
          maxLine: 2 // 文字最多显示的行数
        })
      }
      // 商品价格
      if (that.goods.scribingPrice && Number(that.goods.scribingPrice) && !that.goods.posterImageUrl) {
        context.setFillStyle('#ff0000')
        context.setFontSize(14)
        context.fillText('￥', 19 * rpx, 314 * rpx)
        context.setFillStyle('#ff0000')
        context.setFontSize(19)
        context.fillText(that.goods.price, 32 * rpx, 314 * rpx)
      } else {
        context.setFillStyle('#ff0000')
        context.setFontSize(14)
        context.fillText('￥', 19 * rpx, 331 * rpx)
        context.setFillStyle('#ff0000')
        context.setFontSize(19)
        context.fillText(that.goods.price, 32 * rpx, 331 * rpx)
      }
      // 商品原价
      if (that.goods.scribingPrice && Number(that.goods.scribingPrice) && !that.goods.posterImageUrl) {
        context.setFillStyle('#9a9a9c')
        context.setFontSize(11)
        context.fillText('原价', 20 * rpx, 331 * rpx)
        context.setFillStyle('#9a9a9c')
        context.setFontSize(11)
        context.fillText('￥' + that.goods.scribingPrice, 40 * rpx, 331 * rpx)
        context.setStrokeStyle('#9a9a9c')
        context.moveTo(43 * rpx, 327 * rpx)
        context.lineTo((48 + that.goods.scribingPrice.length * 9 - 12) * rpx, 327 * rpx)
        context.stroke()
      }
      // 分享的库存
      if (that.goods.stock && !that.goods.posterImageUrl) {
        context.setFillStyle('#333333')
        context.setFontSize(11)
        context.setTextAlign('right')
        context.fillText('仅剩' + that.goods.stock + '件', 215 * rpx, 331 * rpx)
      }
      // 二维码
      // context.globalCompositeOperation = 'source-over'
      that.$pt.downloadFile({
        url: that.goods.wxaCode,
        success: function(wxaCode) {
          context.drawImage(wxaCode.tempFilePath, 28 * rpx, 347 * rpx, 75 * rpx, 75 * rpx)
          context.draw(true)
        }
      })
      // 小程序码说明文字
      context.setFillStyle('#fff')
      if (that.goods.posterImageUrl) {
        context.fillRect(0, (340 * rpx), 239 * rpx, (432 * rpx) - (340 * rpx))
      } else {
        context.fillRect(0, (360 * rpx), 239 * rpx, (432 * rpx) - (360 * rpx))
      }
      // context.globalCompositeOperation = 'source-over'
      context.setTextAlign('left')
      context.setFillStyle('#333333')
      context.font = 'normal bold 12px'
      context.setFontSize(12)
      context.fillText('长按识别小程序码', 113 * rpx, 381 * rpx)
      context.setFillStyle('#7b7b7b')
      context.setFontSize(11)
      context.fillText('立即抢购', 113 * rpx, 400 * rpx)
    },
    dealWords(options) {
      // 处理文字多出省略号显示
      options.ctx.setFontSize(options.fontSize) // 设置字体大小
      var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth) // 实际总共能分多少行
      var count = allRow >= options.maxLine ? options.maxLine : allRow // 实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
      var endPos = 0 // 当前字符串的截断点
      let lineNum = 0
      for (var j = 0; j < count; j++) {
        var nowStr = options.word.slice(endPos) // 当前剩余的字符串
        var rowWid = 0 // 每一行当前宽度
        if (options.ctx.measureText(nowStr).width > options.maxWidth) { // 如果当前的字符串宽度大于最大宽度，然后开始截取
          lineNum = lineNum + 1
          for (var m = 0; m < nowStr.length; m++) {
            rowWid += options.ctx.measureText(nowStr[m]).width // 当前字符串总宽度
            if (rowWid > options.maxWidth) {
              if (j === options.maxLine - 1) { // 如果是最后一行
                options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 15) // (j+1)*18这是每一行的高度
              } else {
                options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 15)
              }
              endPos += m // 下次截断点
              break
            }
          }
        } else { // 如果当前的字符串宽度小于最大宽度就直接输出
          if (lineNum > 0) {
            options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 15)
            return
          }
          options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 15 + 8)
        }
      }
    },
    addWechatGroup() {
      this.showWechat = true
      this.drawQrCode()
    },
    drawQrCode() {
      const that = this
      // canvas 使用的是px，如果要适应屏幕需要转化
      let rpx = that.$pt.getSystemInfoSync().windowWidth / 375
      that.$utils.showToast({
        title: '图片生成中',
        icon: 'loading',
        duration: 1000
      })
      const context = that.$pt.createCanvasContext('qrCodeCanvas')
      // 清除画布，防止层叠
      context.clearRect(0, 0, 130 * rpx, 130 * rpx)
      that.$pt.downloadFile({
        url: that.addGroundInfo.personWechatCodeUrl,
        success: function(wxaCode) {
          context.drawImage(wxaCode.tempFilePath, 0 * rpx, 0 * rpx, 130 * rpx, 130 * rpx)
          context.draw(true)
        }
      })
    },
    saveToAlbum: function(canvasId) {
      const that = this
      that.$pt.canvasToTempFilePath({
        canvasId: canvasId,
        success: (res) => {
          const filePath = res.tempFilePath
          if (filePath) {
            that.$pt.saveImageToPhotosAlbum({
              filePath: filePath,
              success: (res) => {
                that.$utils.showToast({ title: '保存成功，请到手机相册查看' })
              },
              fail: function(err) {
                if (err.errMsg.indexOf('cancel') !== -1) return
                that.$pt.showModal({
                  content: '保存图片需要访问你的相册',
                  success(res) {
                    if (res.confirm) {
                      that.$pt.openSetting()
                    } else if (res.cancel) {
                      console.log(err)
                    }
                  }
                })
              }
            })
          }
        }
      })
    },
    initPhoneLayer() {
      this.isGetPhoneInfo = false
      this.skeletonLoading = false
      if (this.getPhone && this.$pt.getStorageSync('skuAuthEls')) {
        this.$pt.removeStorageSync('skuAuthEls')
        this.getSkuBuy(this.skuBuyType)
      }
    },
    getSkuBuy(isCart, type) {
      if (this.skuFinished) return
      if (this.storeOff && (this.getAppInfo.storeHomeAuthority || this.getAppInfo.groupBuyAuthority)) {
        this.isGetStoreOff = false
        setTimeout(() => {
          this.isGetStoreOff = true
        }, 100)
        return
      }
      if (!this.getCustomerId) {
        this.$pt.setStorageSync('skuAuthEls', true)
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
        // this.goToSkyLayer(isCart, type)
      } else {
        if (!this.getPhone && this.getShowBuyCard !== false) {
          this.$pt.setStorageSync('skuAuthEls', true)
          this.skuBuyType = isCart
          this.isGetPhoneInfo = true
          return
        } else {
          this.isGetPhoneInfo = false
        }
        this.goToSkyLayer(isCart, type)
      }
    },
    goToSkyLayer(isCart, type) {
      if (this.shareMemberId) {
        this.goods.shareMemberId = this.shareMemberId
      }
      const comissionFlag = this.getCurrentPage().query.comissionFlag
      this.$refs.getSkuBuy.show(this.goods, isCart, comissionFlag, this.qty, type)
    },
    getSkuBuyFinished(params) {
      this.$pt.setStorageSync('skuParams', params)
      this.$refs.cartBadge.initCount()
    },
    goToCart() {
      if (this.getCustomerId) {
        if (this.getPhone) {
          if (this.shareMemberId) {
            this.$pt.reLaunch({ url: '/pages/shop/cart/main?shareMemberId=' + this.shareMemberId })
          } else {
            this.$pt.reLaunch({ url: '/pages/shop/cart/main' })
          }
        } else {
          this.isGetPhoneInfo = true
        }
      } else {
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
      }
    },
    goToChat() {
      if (this.getCustomerId) {
        if (this.checkOwner) {
          this.$pt.navigateTo({ url: '/pages/chat/records/main' })
        } else {
          this.$pt.navigateTo({ url: '/pages/chat/main?friendId=' + this.getMemberId })
        }
      }
    },
    selCategory(goodsId) {
      this.$refs.upperCategory.selCategory(goodsId)
    },
    setGoodsStatus() {
      this.goods.goodsStatus = 1
    },
    onCountDownChange(e) {
      // 倒计时
      let timer = e.mp.detail
      if (timer.hours < 10) {
        timer.hours = '0' + timer.hours
      }
      if (timer.minutes < 10) {
        timer.minutes = '0' + timer.minutes
      }
      if (timer.seconds < 10) {
        timer.seconds = '0' + timer.seconds
      }
      this.timer = timer
    },
    onCountDownOver() {
      this.isActiving = false
      this.initUserGoods()
    },
    listCouponByGoodsId() {
      // if (!this.getShowBuyCard) return
      // if (!this.getCustomerId) return
      // 获取商品可用优惠券列表
      let params = {
        customerMemberId: this.getCustomerId,
        goodsId: this.getCurrentPage().query.goodsId
      }
      this.nodata = false
      this.showCouponList = []
      listCouponByGoodsId(params).then(response => {
        if (response.isError) return
        if (response.data.length === 0) {
          this.nodata = true
          return
        }
        response.data.forEach(item => {
          if (this.showCouponList.length < 3) {
            // 判断券信息数组里是否已有该类型的券，没有则加入
            if (this.showCouponList.findIndex(value => value.couponType === item.couponType) === -1) {
              this.showCouponList.push(item)
            }
          }
          if (item.validTimeType === 1) {
            item.validStartTime = item.validStartTime.split(' ')[0]
            item.validEndTime = this.isToday(item.validEndTime)
          }
          if (item.cashAmount) {
            // item.cashAmount = '11915.11'
            item.cashAmount = parseFloat(item.cashAmount)
            item.cashPriceLength = item.cashAmount.toString().length
          }
          if (item.reduceAmount) {
            // item.reduceAmount = '12915.12'
            item.reduceAmount = parseFloat(item.reduceAmount)
            item.reducePriceLength = item.reduceAmount.toString().length
          }
          if (item.discountPercent) item.discountPercent = parseFloat(item.discountPercent)
          item.expend = false
        })
        this.couponList = response.data
      }).catch((
      ) => { })
    },
    isToday(date) {
      let today = new Date().toLocaleDateString()
      let tsDate = date.split(' ')[0].replace(/-/g, '/')
      if (new Date(tsDate).getTime() === new Date(today).getTime()) return 'today'
      return date.split(' ')[0]
    },
    goMaterial() {
      this.$pt.navigateTo({url: '/pages/shop/detail/share-material/main?goods=' + encodeURIComponent(JSON.stringify(this.goods))})
    },
    updateShelfFlag(upperShelfFlag) {
      // 商品上下架
      let params = {
        memberId: this.getCustomerId,
        upperShelfFlag: upperShelfFlag,
        goodsId: this.getCurrentPage().query.goodsId
      }
      updateShelfFlag(params).then(response => {
        if (response.isError) return
        this.$utils.showToast({
          title: upperShelfFlag === 1 ? '上架成功' : '下架成功'
        })
        this.goods.upperShelfFlag = upperShelfFlag
        // 如果下架商品，将设置推荐取消掉
        if (upperShelfFlag === 0) {
          this.goods.showHomePage = 0
        }
        // 为返回到小B选品库做准备
        const pages = getCurrentPages() // eslint-disable-line
        let prevPage = pages[pages.length - 2]
        this.goods.blockType = this.getCurrentPage().query.blockType
        prevPage.setData({ goods: this.goods })
      }).catch(() => {
      })
    },
    // 设置推荐商品
    updateShowHomePage() {
      // 商品设置推荐
      let showHomePage = this.goods.showHomePage === 1 ? 0 : 1
      let params = {
        memberId: this.getCustomerId,
        showHomePage: showHomePage,
        goodsId: this.getCurrentPage().query.goodsId
      }
      updateShowHomePage(params).then(response => {
        if (params.isError) return
        // this.goods.showHomePage = showHomePage
        this.$delete(this.goods, 'showHomePage')
        this.$set(this.goods, 'showHomePage', showHomePage)
        // 为返回到小B选品库做准备
        const pages = getCurrentPages() // eslint-disable-line
        let prevPage = pages[pages.length - 2]
        this.goods.blockType = this.getCurrentPage().query.blockType
        prevPage.setData({ goods: this.goods })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background: #f8f8f8;
  min-height: 100vh;
}
.cross-boder-inf{
  border-top: #f5f5f5 10px solid;
  padding-bottom: 13px;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 12px;
}
.icon-country-c{
  width: 20px;
  height: unset;
}
.title-share-bar{
  &:after{
    content: '';
    display: block;
    clear: both;
  }
  .title-point{
    float: left;
  }
  .share-ri{
    float: left;
    text-align: center;
  }
}
.limit-num{
  background: #ffffff;
  border-radius: 50px;
  padding: 2px 5px;
  font-weight: normal;
}
.skeleton-box{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 80;
  background-color: #fff;
  overflow: hidden;
  .skeleton-shop{
    border-left: #f5f5f5 90px solid;
  }
  .skeleton-menu{
    border-bottom: #fafafa 1px solid;
  }
  .skeleton-layer{
    margin: 10px;
    &.bg-box{
      border-radius: 5px;
      background-color: #f5f5f5;
    }
    .bg-box{
      border-radius: 5px;
      background-color: #f5f5f5;
    }
    .bg-box-1{
      border-radius: 30px 0px 0px 30px;
      background-color: #f5f5f5;
    }
    &.layer-1{
      margin: 0!important;
      height: 375px;
    }
  }
}
.skeleton-layer-bg{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 79;
}
.add-time-t{
  color: #FF243D;
}
.parameter-bar{
  border-bottom: #fafafa 1px solid;
  &:last-child{
    border-bottom: none;
  }
  span{
    &:first-child{
      min-width: 65px;
    }
  }
}
.user-prise{
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  color: #fff;
  // font-weight: bold;
  font-size: 11px;
  background: linear-gradient(135deg, #FE6D41, #ED4836);
  border-radius: 9px;
}
.current-index{
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: absolute;
  right: 10px;
  bottom: 16px;
  border-radius: 50px;
  padding: 0 10px;
  line-height: 17px;
  z-index: 20;
  &.current-promotion{
    bottom: 55px;
  }
}
.delivery-shop{
  border-top: #f5f5f5 10px solid;
}
.fix-r-btn{
  position: fixed;
  right: 0;
  bottom: 63px;
  z-index: 20;
}
.share-btn-fixed{
  > div{
    background: linear-gradient(to right, #3b3b3a, #616161);
    color: #fff;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;  
    padding: 0 9px 0 10px;
  }
  span{
    padding-left: 6px;
    display: inline-block;
  }
}
.shipping-span {
  display: block;
  color: #ed4836;
  border-radius: 3px;
  border: #f27f72 1px solid;
  padding: 0 5px;
  line-height: unset;
}
.add-b-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 60px;
  box-sizing: border-box;
  padding-top: 8px;
  background: #fff;
  width: 100%;
  button {
    height: 45px;
    line-height: 45px;
    font-size: 16px !important;
    font-weight: bold;
    border: none;
    text-align: center;
    &:after {
      display: none;
    }
    .label-inline {
      display: inline-block;
    }
  }
}
.btn-add-address {
  background-color: #ffffff;
  color: #333333;
  box-shadow: none;
  border: #fdc907 2px solid !important;
  line-height: 42px !important;
}
.btn-from-wechat {
  color: #333333;
  background: linear-gradient(to right, #fed800, #fcc605);
}
.share-b-btn {
  .btn-l {
    margin: 0 10px;
    display: block;
    padding: 10px 0;
    border-radius: 5px;
    text-align: center;
    &.buy-now {
      background: #333333;
      color: #fff;
    }
    &.add-s {
      background: linear-gradient(to right, #f6d923, #fbc408);
      color: #0b0500;
    }
    &.off-s {
      background: #e4e4e4;
      color: #acacac;
    }
  }
}
.font-color-81 {
  color: #818181;
}
.type-10 {
  color: #ffb025;
}
.type-30 {
  color: #ff5900;
}
.contactBtn {
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
}
.income-bar {
  color: #ff6600;
  .iconfont {
    color: #666666;
  }
}
.circle-bar {
  background: #fbf3d4;
  border-radius: 100px;
  padding: 2px 0;
  display: inline-block;
  .circle-tag {
    background: #f8c400;
    border-radius: 100px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
  }
  .circle-price {
    display: inline-block;
    vertical-align: middle;
  }
}
.pos-rel {
  position: relative;
}
.share-button {
  width: 54px;
  height: 54px;
  position: fixed;
  bottom: 95px;
  right: 18px;
  z-index: 100;
  background: #52c134;
  color: #ffffff;
  border-radius: 100px;
  font-size: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  image {
    display: inline-block;
    margin-top: 9px;
  }
}
.top-swiper {
  width: 375px;
  height: 375px;
}

.top-img {
  width: 375px;
  height: 375px;
}

.detail {
  background-color: #fff;
  // min-height: 300px;
  // padding: 10px 0;
}
.store-detail {
  min-height: 50px;
  text-align: left;
  font-size: 14px;
  color: #666;
  padding: 20px 10px 13px;
  .flex-item {
    width: 225px;
  }
}

.detail-online > span {
  font-weight: bold;
}

.detail-online > div {
  background-color: #f8c400;
  height: 3px;
}

.detail-offline > span {
  color: gray;
}

.detail-offline > div {
  height: 3px;
}

.bottom-btn {
  width: 100%;
  height: 53px;
  position: fixed;
  z-index: 90;
  bottom: 0;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  .item-bottom {
    width: 348px;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    .btn {
      width: 215px;
      overflow: hidden;
      height: 42px;
      border-radius: 100px;
      span {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 15px;
        color: #333333;
        // background: #ffe200;
        cursor: pointer;
        &:first-child {
          // background: #333333;
          color: #fff;
        }
      }
      .shop-now {
        flex-direction: column;
        .self-shop {
          font-size: 8px;
          .price {
            display: unset;
            background: unset;
            color: #ff001d;
            font-size: 8px;
          }
        }
      }
    }
    ul {
      justify-content: space-between;
      width: 80px;
      align-items: center;
      position: relative;
      padding-left: 5px;
      li {
        font-size: 10px;
        color: #333333;
        text-align: center;
        .icon {
          display: inline-block;
          margin: 0 auto;
        }
        .item-b-txt {
          display: block;
          margin-top: -4px;
          overflow: hidden;
        }
      }
    }
  }
}
.store-btn {
  background: #ffc808;
  color: white;
  height: 22px;
  line-height: 22px;
  border-radius: 3px;
}
.buy {
  width: 28%;
  color: #fff;
  background-color: red;
}

.cart {
  width: 28%;
  color: #fff;
  background-color: #fe976a;
}

.div-share {
  width: 100%;
  height: 170px;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 100;
  border-radius: 15px 15px 0 0;
  .cross-btn {
    position: absolute;
    top: 16px;
    right: 16px;
  }
}

.share-btn {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -35px;
  background: none;
}

.share-btn:after {
  border: none;
}

.create-poster {
  width: 239px;
  height: 432px;
  margin-top: -53px;
  overflow: hidden;
}

.share-canvas {
  width: 239px;
  height: 432px;
  overflow: hidden;
}

.close-btn {
  position: absolute;
  margin-top: -265px;
  right: 30px;
}
.badge {
  position: absolute;
  right: 0;
  top: -3px;
  z-index: 101;
  zoom: 0.9;
}

.btn-upper {
  width: 100%;
  height: 35px;
  position: fixed;
  bottom: 0;
  background-color: #f8c400;
  font-size: 16px;
  padding-top: 10px;
  &.un-buy {
    color: #4e4e4e;
    background-color: #c5c5c5;
  }
}

.get-category {
  width: 375px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 990;
}

.bg-confirm {
  background-color: #f8c400;
}

.div-income {
  border-radius: 5px;
  background-color: #fbf2d4;
  font-size: 12px;
  padding-top: 2px;
  padding-left: 10px;
  padding-right: 10px;
  width: 110px;
}

.explain-popup {
  .popup-item {
    width: 290px;
    height: 430px;
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    .title {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #333333;
    }
    .centent {
      position: absolute;
      top: 60px;
      right: 20px;
      left: 20px;
      bottom: 75px;
      overflow-x: hidden;
      overflow-y: auto;
      h5 {
        font-weight: bold;
        font-size: 14px;
        color: #5a5a5a;
      }
      p {
        font-size: 14px;
        color: #5a5a5a;
      }
    }
    .btn {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        height: 41px;
        width: 250px;
        background: #fdc907;
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #333333;
      }
    }
  }
}
.line-h-1 {
  line-height: 1;
}
.self-buy {
  color: #fff;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  border-radius: 0 4px 4px 4px;
  background: linear-gradient(135deg, #FE6D41, #ED4836);
}
.wechat-box {
  padding-bottom: 32px;
  .wechat-group {
    border-radius: 3px;
    box-shadow: 0px 4px 9px #ededed;
  }
}
.seckill-box {
  height: 53px;
  padding: 0 10px;
  background-size: 375px 53px;
  background-repeat: no-repeat;
  .count-down-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .count-down {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .square-block {
        min-width: 12px;
        font-size: 10px;
        display: inline-block;
        background: #ffe200;
        border-radius: 3px;
        line-height: 1;
        text-align: center;
        padding: 4px 2px;
      }
    }
  }
  .self-shop {
    line-height: 1;
    padding: 3px 11px;
    font-size: 11px;
    border-radius: 0 12px 0 12px;
    background: #000000;
  }
}
.save-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 53px;
  text-align: center;
  button {
    height: 53px;
    line-height: 53px;
    border-radius: unset;
    padding: unset;
    color: #333;
    font-size: 25px;
    background-color: #ffe200;
  }
}
.add-group-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .add-group-main {
    width: 323px;
    // height: 446px;
    border-radius: 15px;
    background: white;
    .main-title {
      height: 39px;
      border-radius: 15px 15px 0 0;
      font-size: 18px;
      line-height: 39px;
      text-align: center;
      background: #ffe200;
    }
    .main-plan-1 {
      width: 249px;
      height: 251px;
      background: #fff9cc;
      border-radius: 15px;
      margin: 11px auto 0;
      padding: 9px 16px 0;
      .paln-1 {
        position: relative;
        color: #666666;
        font-size: 12px;
        line-height: 24px;
        .font-blue {
          color: #3878ff;
          position: absolute;
          right: 2px;
        }
      }
      .qr-code {
        .qr-code-canvas {
          width: 130px;
          height: 130px;
        }
      }
    }
    .main-plan-2 {
      width: 249px;
      height: 55px;
      line-height: 24px;
      background: #fff9cc;
      border-radius: 15px;
      margin: 11px auto 0;
      padding: 9px 16px 0;
      font-size: 12px;
      .font-blue {
        color: #3878ff;
      }
    }
    .online-service {
      border-radius: 25px;
      height: 40px;
      width: 281px;
      background: #ffe200;
      font-size: 19px;
      line-height: 40px;
      padding: 0;
      text-align: center;
      &::after {
        border: unset;
      }
    }
  }
  .cross-btn {
    width: 35px;
    height: 35px;
    background: #dadada;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    /deep/ .van-icon {
      display: block;
    }
  }
}
.count-down-fixed {
  height: 53px;
  width: 100%;
  background: #ffe200;
  position: fixed;
  bottom: 0;
  left: 0;
  .count-down-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px;
    line-height: 1.4;
  }
}
.shop-null-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 53px;
  background: white;
  width: 100%;
  .shop-null-box {
    display: flex;
    align-items: center;
    .icon-box {
      text-align: center;
      width: 53px;
      height: 53px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .icon {
        display: block;
        margin: 0 auto;
      }
    }
    .shop-null {
      width: calc(100% - 53px);
      background: #eeeeee;
      height: 53px;
      text-align: center;
      line-height: 53px;
    }
  }
}
.distribution-bottom {
  padding: 0 10px;
  height: 50px;
  border-top: 1px solid #e5e5e5;
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 20px);
  background-color: #fff;
  .btn {
    &:first-child {
      width: 172px;
    }
    width: 173px;
    height: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 15px;
  }
  .btn-box {
    width: 100%;
    .buy-btn {
      line-height: 1;
      background-color: #ffe200;
    }
    .up-btn {
      background-color: #333;
      color: white;
    }
    .up-btn-over {
      background-color: #dadada;
    }
  }
}
.font-red {
  color: #ed4836;
}
.free-shipping {
  .shipping-content {
    width: 98px;
    height: 16px;
    line-height: 16px;
    border: 1px solid #f27f72;
    border-radius: 2px;
    color: #ed4836;
    font-size: 12px;
  }
}
.coupon-row {
  color: #ED4836;
  font-size: 12px;
  .coupon-info {
    height: 18px;
    line-height: 18px;
    background: #fcf6f1;
    border: #ff8375 1px solid;
    border-radius: 2px;
    padding: 0 7px;
    margin-right: 5px;
  }
}
.mask-layer {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 111;
}
.action-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 199;
  max-height: 485px;
  background-color: white;
  border-radius: 20px 20px 0 0;
  .head-row {
    height: 59px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    .cross-wrap {
      position: absolute;
      right: 21px;
      top: 24.5px;
      /deep/ .van-icon-cross {
        font-weight: bold;
      }
    }
  }
  .action-popup {
    height: 372px;
  }
  /deep/ .van-overlay {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .action-main {
    padding: 12px 15px 6px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    min-height: 100%;
  }
  .list {
    // padding: 15px 15px 0;
  }
  .action-footer {
    font-size: 17px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    color: #ff593e;
    font-weight: bold;
    background: white;
  }
}
.out-layer {
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background: #323232;
  margin-top: -47px;
  .self-income {
    height: 18px;
    padding: 0 4px;
    line-height: 18px;
    color: white;
    font-size: 12px;
    background: linear-gradient(to right, #fe6d41, #ed4836);
    border-radius: 0 4px 4px 4px;
  }
  .left {
    position: absolute;
    bottom: 0;
    width: 228px;
    height: 55px;
    flex: 1;
    padding: 0 15px;
    padding-right: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: left;
    // background: linear-gradient(to right, #ffa236, #ffd248);
    .self-shop {
      line-height: 1;
      padding: 3px 11px;
      font-size: 11px;
      border-radius: 0 12px 0 12px;
      background: #000000;
    }
  }
  .single {
    height: 0;
    width: 0;
    border: 55px solid;
    // border-color: transparent ;
    border-bottom: none;
    left: 228px;
    position: absolute;
    bottom: 0;
    border-left: 38px solid;
  }
  .right {
    width: 116px;
    height: 47px;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .count-down-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .count-down {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .square-block {
        font-size: 13px;
      }
    }
  }
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50px;
  &.ellipsis-promotion{
    width: 150px;
  }
}
.library-wrap{
  height: 53px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-top: 0.5px solid #eeeeee;
  padding: 0 10px;
  box-sizing: border-box;
  .operation-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .operation-btn{
      flex: 1;
      height: 32px;
      border-radius: 5px;
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      margin-left: 10px;
      &:first-child{
        margin-left: unset;
      }
    }
  }
  .upper{
    background-color: #343434;
    color: #fff;
  }
  .lower{
    background-color: #EAEAEA;
    color: #333333;
  }
}
</style>
